/**
 * Card 组件的主题配置
 * 
 * 基于企业级设计规范 (Card.json) 的完整配置
 * 包含所有卡片样式定义
 */

import type { ComponentToken } from 'antd/es/card/style';

// ========== 设计 Token 常量 ==========

/**
 * 头部相关 Token
 */
const HEADER_TOKENS = {
  // 背景颜色
  bg: 'transparent',
  
  // 字体大小
  fontSize: {
    default: 16,
    small: 14,
  },
  
  // 高度
  height: {
    default: 55,
    small: 47,
  },
  
  // 内边距
  padding: {
    default: 24,
    small: 12,
  },
} as const;

/**
 * 内容区相关 Token
 */
const BODY_TOKENS = {
  // 内边距
  padding: {
    default: 24,
    small: 12,
  },
} as const;

/**
 * 操作区相关 Token
 */
const ACTIONS_TOKENS = {
  // 背景颜色
  bg: '#ffffff',
  
  // 每一项的外间距
  liMargin: '12px 0',
} as const;

/**
 * 标签页相关 Token
 */
const TABS_TOKENS = {
  // 下间距
  marginBottom: -25,
} as const;

/**
 * 额外区相关 Token
 */
const EXTRA_TOKENS = {
  // 文字颜色
  color: '#1a1a1a',
} as const;

/**
 * Card 完整主题配置
 * 
 * 根据设计规范文件 Card.json 定义的企业级卡片样式
 * 涵盖所有卡片区域的完整配置
 * 
 * @example
 * ```tsx
 * <ConfigProvider theme={{ components: { Card: cardThemeConfig } }}>
 *   <Card title="卡片标题">卡片内容</Card>
 *   <Card size="small" title="小卡片">小卡片内容</Card>
 *   <Card 
 *     title="带操作区的卡片" 
 *     actions={[<Button>操作1</Button>, <Button>操作2</Button>]}
 *   >
 *     内容区域
 *   </Card>
 * </ConfigProvider>
 * ```
 */
export const cardThemeConfig: Partial<ComponentToken> = {
  // ========== 头部配置 ==========
  headerBg: HEADER_TOKENS.bg,
  headerFontSize: HEADER_TOKENS.fontSize.default,
  headerFontSizeSM: HEADER_TOKENS.fontSize.small,
  headerHeight: HEADER_TOKENS.height.default,
  headerHeightSM: HEADER_TOKENS.height.small,
  
  // ========== 内容区配置 ==========
  // 注意：antd 的 Card Token 可能使用 `paddingLG` 和 `padding` 来表示
  // 这里根据实际的 antd Card Token 进行映射
  
  // ========== 操作区配置 ==========
  actionsBg: ACTIONS_TOKENS.bg,
  actionsLiMargin: ACTIONS_TOKENS.liMargin,
  
  // ========== 标签页配置 ==========
  tabsMarginBottom: TABS_TOKENS.marginBottom,
  
  // ========== 额外区配置 ==========
  extraColor: EXTRA_TOKENS.color,
};

/**
 * 获取 Card 主题配置
 * 
 * 支持部分覆盖默认配置，可以基于完整的设计规范进行定制
 * 
 * @param customConfig 自定义配置（可选）
 * @returns 合并后的主题配置
 * 
 * @example
 * ```tsx
 * // 基于设计规范的定制
 * const myCardTheme = getCardTheme({
 *   headerBg: '#f5f5f5',              // 自定义头部背景色
 *   headerFontSize: 18,               // 自定义头部字体大小
 *   actionsBg: '#fafafa',             // 自定义操作区背景色
 * });
 * 
 * <ConfigProvider theme={{ components: { Card: myCardTheme } }}>
 *   <Card title="自定义卡片">自定义样式的卡片内容</Card>
 * </ConfigProvider>
 * ```
 */
export const getCardTheme = (
  customConfig?: Partial<ComponentToken>
): Partial<ComponentToken> => {
  return {
    ...cardThemeConfig,
    ...customConfig,
  };
};

/**
 * 导出 Card 组件的 Token 类型
 * 方便 TypeScript 类型检查和开发时的智能提示
 */
export type { ComponentToken as CardComponentToken } from 'antd/es/card/style';

